<template>
  <h1>店铺申请入驻请填写一下表单</h1>
  <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
  >
    <el-form-item label="店铺名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="店铺电话" prop="tel">
      <el-input v-model="ruleForm.tel"></el-input>
    </el-form-item>
    <el-form-item label="店铺地址" prop="address">
      <el-input v-model="ruleForm.address"></el-input>
    </el-form-item>
    <el-form-item label="店铺logo">
<!--      <el-input v-model="ruleForm.logo"></el-input>-->
      <el-upload
          class="upload-demo"
          action="http://localhost:8080/upload/add"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
          :on-success="uploadSuccess"
      >
        <el-button type="primary">点击上传logo</el-button>
        <template #tip>
          <div class="el-upload__tip">

          </div>
        </template>
      </el-upload>
    </el-form-item>
    <h1>请填写管理员信息</h1>
    <el-form-item label="用户名" prop="username">
      <el-input v-model="ruleForm.username"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="ruleForm.email"></el-input>
    </el-form-item>
    <el-form-item label="电话" prop="phone">
      <el-input v-model="ruleForm.phone"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="ruleForm.password" type="password"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="repwd">
      <el-input v-model="ruleForm.repwd" type="password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)"
      >申请</el-button
      >
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { reactive, ref } from 'vue'
import {ElMessage} from "element-plus";
import {add} from "@/api/shop";
import router from "@/router";
export default {
  setup() {
    const fileList = ref([])

    const handleRemove = (file, fileList) => {
      console.log(file, fileList)
    }
    const handlePreview = (file) => {
      console.log(file)
    }
    const formSize = ref('')
    const ruleFormRef = ref()
    const ruleForm = reactive({
      name: '',
      tel:'',
      address:'',
      logo:'',
      username:'',
      email:'',
      phone:'',
      password:'',
      repwd:'',
    })
    const rules = reactive({
      name: [
        {
          required: true,
          message: '请输入店铺名',
          trigger: 'blur',
        },
        {
          min: 3,
          max: 5,
          message: '长度3到5位之间',
          trigger: 'blur',
        },
      ],
      tel: [
        {
          required: true,
          message: '请输入店铺电话',
          trigger: 'blur',
        },
        {
          min: 8,
          max: 11,
          message: '长度8到11位之间',
          trigger: 'blur',
        },
      ],
      address: [
        {
          required: true,
          message: '请输入店铺地址',
          trigger: 'blur',
        },
        {
          min: 3,
          max: 5,
          message: '长度3到5位之间',
          trigger: 'blur',
        },
      ],
      username: [
        {
          required: true,
          message: '请输入管理员姓名',
          trigger: 'blur',
        },
        {
          min: 3,
          max: 5,
          message: '店铺名称长度3到5位之间',
          trigger: 'blur',
        },
      ],
      email: [
        {
          required: true,
          message: '请输入邮箱地址',
          trigger: 'blur',
        },
        {
          min: 3,
          max: 5,
          message: '店铺名称长度3到5位之间',
          trigger: 'blur',
        },
      ],
      phone: [
        {
          required: true,
          message: '请输入电话号码',
          trigger: 'blur',
        },
        {
          min: 8,
          max: 11,
          message: '长度8到11位之间',
          trigger: 'blur',
        },
      ],
      password: [
        {
          required: true,
          message: '请输入密码',
          trigger: 'blur',
        },
        {
          min: 3,
          max: 5,
          message: '长度3到5位之间',
          trigger: 'blur',
        },
      ],
      repwd: [
        {
          required: true,
          message: '请输入重复密码',
          trigger: 'blur',
        },
        {
          min: 3,
          max: 5,
          message: '长度3到5位之间',
          trigger: 'blur',
        },
      ],
    })
    const submitForm = (formEl) => {
      if (!formEl) return
      if(ruleForm.password!==ruleForm.repwd){
        ElMessage.error("二次密码不一致")
        return;
      }
      formEl.validate((valid) => {
        if (valid) {
          add({
            'name':ruleForm.name,
            'tel':ruleForm.tel,
            'address':ruleForm.address,
            'logo':ruleForm.logo,
            'admin': {
              'username':ruleForm.username,
              'email':ruleForm.email,
              'phone':ruleForm.phone,
              'password':ruleForm.password,
            }
          }).then(res=>{
            if(res.success){
              router.replace({ path: '/login' })
              ElMessage.success("申请成功")
            }else {
              ElMessage.error("申请失败")
            }
          })
        } else {
          console.log('error submit!')
          return false
        }
      })
    }
    const uploadSuccess = (response) => {
       ruleForm.logo = response.data.fullPath
    }

    const resetForm = (formEl) => {
      if (!formEl) return
      formEl.resetFields()
    }
    return{
      formSize,
      ruleFormRef,
      ruleForm,
      rules,
      submitForm,
      resetForm,
      fileList,
      handleRemove,
      handlePreview,
      uploadSuccess
    }
  }
}
</script>

<style scoped>
h1{
  text-align: center;
}
</style>
